import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  state = {
    username: 'zs',
    desc: '狂徒',
    city: '2',
    isSingle: true,
  }

  // 👍：利用对象键名称的插值符号[]实现封装
  handleChange = (e) => {
    // console.log('标签的name属性', e.target.name)
    this.setState({ [e.target.name]: e.target.value })
  }

  // 🔔 特例：checkbox 是通过 e.target.checked 而不是 e.target.value
  handleSingle = (e) => {
    // ❌ 错误写法
    // this.setState({ isSingle: e.target.value })
    // ✅ 正确写法
    this.setState({ isSingle: e.target.checked })
  }

  render() {
    return (
      <>
        <h1>表单处理</h1>
        姓名：
        <input type='text' name='username' value={this.state.username} onChange={this.handleChange} />
        <br />
        描述：<textarea name='desc' value={this.state.desc} onChange={this.handleChange}></textarea>
        <br />
        城市：
        <select name='city' value={this.state.city} onChange={this.handleChange}>
          <option value='1'>北京</option>
          <option value='2'>上海</option>
          <option value='3'>广州</option>
          <option value='4'>深圳</option>
        </select>
        <br />
        是否单身：
        <input type='checkbox' checked={this.state.isSingle} onChange={this.handleSingle} />
      </>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
